<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }
        .list {
            width: 600px;
            margin-top: 100px;
        }
        .list-item {
            margin: 6px 0;
            padding: 0 20px;
            line-height: 40px;
            height: 40px;
            background: #409eff;
            color: #fff;
            text-align: center;
            cursor: move;
            user-select: none;
            border-radius: 5px;
        }

        #div1 {width:350px;min-height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
        function allowDrop(ev)
        {
            ev.preventDefault();
        }

        function drag(ev)
        {
            ev.dataTransfer.setData("element",ev.target.id);
        }

        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("element");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>

<p>拖动 RUNOOB.COM 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/assets/1.png" draggable="true" ondragstart="drag(event)" width="336" height="69">


<div draggable="true" ondragstart="drag(event)" id="drag2">abc阿斯顿发第三方</div>


<div class="list">
    <div draggable="true" class="list-item">1</div>
    <div draggable="true" class="list-item">2</div>
    <div draggable="true" class="list-item">3</div>
    <div draggable="true" class="list-item">4</div>
    <div draggable="true" class="list-item">5</div>
    <div draggable="true" class="list-item">6</div>
</div>

<script>
    const list = document.querySelector('.list');
    let draggedItem = null;

    list.addEventListener('dragstart', (e) => {
        draggedItem = e.target;
        setTimeout(() => {
            e.target.classList.add('dragging');
        }, 0);
    });

    // 拖拽结束
    list.addEventListener('dragend', (e) => {
        e.target.classList.remove('dragging');
    });

    // 拖拽经过其他元素
    list.addEventListener('dragover', (e) => {
        e.preventDefault();
        const afterElement = getDragAfterElement(list, e.clientY);
        const currentItem = document.querySelector('.dragging');

        if (afterElement == null) {
            list.appendChild(currentItem);
        } else {
            list.insertBefore(currentItem, afterElement);
        }
    });

    // 获取拖拽后应该放置的位置
    function getDragAfterElement(container, y) {
        const draggableElements = [...container.querySelectorAll('.list-item:not(.dragging)')];

        return draggableElements.reduce((closest, child) => {
            const box = child.getBoundingClientRect();
            const offset = y - box.top - box.height / 2;
            if (offset < 0 && offset > closest.offset) {
                return { offset: offset, element: child };
            } else {
                return closest;
            }
        }, { offset: Number.NEGATIVE_INFINITY }).element;
    }
</script>
</body>
</html>